<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>平台商</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://flatlogic.github.io/awesome-bootstrap-checkbox/bower_components/Font-Awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/build.css">
    <link href="https://at.alicdn.com/t/font_1440001_47llmi4hsil.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="css/media.css">
</head>

<body>
    <div id="header"></div>
    <!-- 主体 -->
    <section class="plats">
        <div class="container">
            <div class="select clearfix">
                <p class="country">监管国家</p>
                <ul class="country-list">
                </ul>
                <p class="score">评分筛选</p>
                <input type="text" class="form-control" id="radarScore1"> - <input type="text" class="form-control" id="radarScore2">
                <div class="submit btn btn-primary block" id="select-btn">提交</div>
            </div>
            <div class="row" id="item-list">
            </div>
            <span style="font-size:14px;">
                <div class="text-center">
                    <ul id="wrapper" class="pagination-sm" style="text-align: center;">
                        <a href="javaScript:;" class="btn " id="pre">上一页</a>
                        <a href="javaScript:;">当前页<span id="now" style="border:1px solid #ccc;display: inline-block;padding: 2px 10px;text-align: center;margin-left: 1em">2</span></a>
                        <a href="javaScript:;" class="btn " id="next">下一页</a>
                        <span>共<span id="allPages" style="padding: 0 6px;line-height:31px"></span>页</span>
                    </ul>
                </div>
            </span>
        </div>
    </section>
    <div id="footer"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/mine.js"></script>
<script src="js/core.js"></script>
<script>
$(function() {
    $("#header").load("./header.html")
    $("#footer").load("./footer.html")
    let countrylist = [
        { id: 1, name: "中国" }, { id: 2, name: "中国香港" }, { id: 3, name: "伯利兹" }, { id: 4, name: "俄罗斯" },
        { id: 5, name: "加拿大" }, { id: 6, name: "南非" }, { id: 7, name: "印尼" }, { id: 8, name: "圣文森特和格林纳丁斯" },
        { id: 9, name: "塞浦路斯" }, { id: 10, name: "塞舌尔" }, { id: 11, name: "巴哈马" }, { id: 12, name: "开曼群岛" },
        { id: 13, name: "德国" }, { id: 14, name: "新加坡" }, { id: 15, name: "新西兰" }, { id: 16, name: "日本" },
        { id: 17, name: "毛里求斯" }, { id: 18, name: "法国" }, { id: 19, name: "澳大利亚" }, { id: 20, name: "爱尔兰" },
        { id: 21, name: "爱沙尼亚" }, { id: 22, name: "瓦努阿图" }, { id: 23, name: "白俄罗斯" }, { id: 24, name: "美国" },
        { id: 25, name: "英国" }, { id: 26, name: "英属维京群岛" }, { id: 27, name: "西班牙" }, { id: 28, name: "阿联酋" },
        { id: 29, name: "马来西亚" }, { id: 30, name: "马耳他" }, { id: 31, name: "黎巴嫩" }
    ];
    let type = -1;
    let current = 1; //页码
    let total = '';//总页数
    
    // 国家列表
    let countryItem = "";
    $.each(countrylist, function(index, val) {
        countryItem += `<li class="checkbox checkbox-primary"><input class="checkbox-info" type="checkbox" name="item" id="i${val.id}" value="${val.name}"><label for="i${val.id}">${val.name}</label></li>`;
    })
    $(".country-list").html(countryItem);
    // 提交请求
    $("#select-btn").click(function() {
        let country = "";
        let radarScore = "";
        $.each($(".country-list li input[type=checkbox]:checked"), function(index, val) {
            console.log($(this).val())
            country += $(this).val() + '-';
        })
        radarScore = $("#radarScore1").val() + "-" + $("#radarScore2").val();
        if ($("#radarScore1").val() == '' && $("#radarScore2").val() == '') {
            radarScore = "";
        }

        Getdata(busList, { type, size: 16, current, radarScore, country }).then(res => {
            console.log(res)
            let items = "";
            $.each(res.data.records, function(index, val) {
                items += `<div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="plat-item">
                        <div class="img"><a href="platDetail.html?id=${val.id}"><img class="img-responsive center-block" src="${val.imgPath}" alt=""></a><span>监督中</span></div>
                        <div class="item-info">
                            <a href="platDetail.html?id=${val.id}">
                                <p class="tit">${val.name}</p>
                            </a>
                            <p class="label">
                                <span class="span-group"><span class="s1">雷达评分</span><span class="s2">${val.radarScore}</span></span>
                            </p>
                            
                        </div>
                    </div>
                </div>`;
            })
            $("#item-list").html(items);
        })

    })


    // 默认请求全部平台item-list
    Getdata(busList, { type, size: 16, current }).then(res => {
        // console.log(res)
        // 渲染页面
        let item0 = "";
        $.each(res.data.records, function(index, val) {
            item0 += `<div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="plat-item">
                        <div class="img"><a href="platDetail.html?id=${val.id}"><img class="img-responsive center-block" src="${val.imgPath}" alt=""></a><span>监督中</span></div>
                        <div class="item-info">
                            <a href="platDetail.html?id=${val.id}">
                                <p class="tit">${val.name}</p>
                            </a>
                            <p class="label">
                                <span class="span-group"><span class="s1">雷达评分</span><span class="s2">${val.radarScore}</span></span>
                            </p>
                            
                        </div>
                    </div>
                </div>`;
        })
        $("#item-list").html(item0);
        $("#now").html(res.data.current);
        total = res.data.total;
        $("#allPages").html(res.data.pages)
    })
    // 上一页
    $("#pre").click(function(){
        $("#next").attr('disabled',false)
        if(current == 1){
            current = 1
            $("#pre").attr('disabled',true)
        }else{
            current--
            $("#pre").attr('disabled',false)
        }
        let item0 = "";
        Getdata(busList, { type, size: 16, current }).then(res =>{
            $.each(res.data.records, function(index, val) {
            item0 += `<div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="plat-item">
                        <div class="img"><a href="platDetail.html?id=${val.id}"><img class="img-responsive center-block" src="${val.imgPath}" alt=""></a><span>监督中</span></div>
                        <div class="item-info">
                            <a href="platDetail.html?id=${val.id}">
                                <p class="tit">${val.name}</p>
                            </a>
                            <p class="label">
                                <span class="span-group"><span class="s1">雷达评分</span><span class="s2">${val.radarScore}</span></span>
                            </p>
                            
                        </div>
                    </div>
                </div>`;
        })
        $("#item-list").html(item0);
        $("#now").html(res.data.current);
        })
        
    })
    // 下一页
    $("#next").click(function(){
        $("#pre").attr('disabled',false)
        if(current == $("#allPages").html()){
            current = $("#allPages").html()
            
            $("#next").attr('disabled',true)
        }else{
            current++;
            $("#next").attr('disabled',false)
        }
        let item0 = "";
        Getdata(busList, { type, size: 16, current }).then(res =>{
        $.each(res.data.records, function(index, val) {
            item0 += `<div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="plat-item">
                        <div class="img"><a href="platDetail.html?id=${val.id}"><img class="img-responsive center-block" src="${val.imgPath}" alt=""></a><span>监督中</span></div>
                        <div class="item-info">
                            <a href="platDetail.html?id=${val.id}">
                                <p class="tit">${val.name}</p>
                            </a>
                            <p class="label">
                                <span class="span-group"><span class="s1">雷达评分</span><span class="s2">${val.radarScore}</span></span>
                            </p>
                            
                        </div>
                    </div>
                </div>`;
        })
        $("#item-list").html(item0);
        $("#now").html(res.data.current);
        })
    })
    // 点击tab切换平台类型tab-list    
    $.each($("#tab-list li"), function(index, val) {
        $("#tab-list li").eq(index).click(function() {
            let item1 = "";
            $(this).addClass("active").siblings().removeClass("active");
            if (index == 0) {
                type = -1;
            } else {
                type = index;
            }
            Getdata(busList, { type, size: 16, current }).then(res => {
                console.log(res)
                $.each(res.data.records, function(index, val) {
                    item1 += `<div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="plat-item">
                        <div class="img"><a href="platDetail.html?id=${val.id}"><img class="img-responsive center-block" src="${val.imgPath}" alt=""></a><span>监督中</span></div>
                        <div class="item-info">
                            <a href="platDetail.html?id=${val.id}">
                                <p class="tit">${val.name}</p>
                            </a>
                            <p class="label">
                                <span class="span-group"><span class="s1">雷达评分</span><span class="s2">${val.radarScore}</span></span>
                            </p>
                            
                        </div>
                    </div>
                </div>`;
                })
                $("#item-list").html(item1);
            })

        })
    })



















})
</script>

</html>